<template>
  <div class="container"></div>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup(props) {
    var num = reactive({
      num: 1,
    });
    function add() {
      num.num++;
      console.log(num);
    }
    return {
      num,
      add,
    };
  },
};
</script>

<style scoped>
.container {
  background: linear-gradient(to bottom, #0b1728 0%, #0b1728 40%, #1c1c1c 150%),
    linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 200%);
  background-blend-mode: multiply;
  opacity: 0.8;
  min-height: 100px;
  color: white;
}
</style>
